<template>
	<view class="i-img-banner" :style="[bodyStyle]">
		<view class="e-rela">
			<swiper :style="[imgSize]" class="swiper" autoplay @change="handleChange" :previous-margin="margin" :next-margin="margin" circular>
				<swiper-item class="e-flex-xy-center" :item-id="`${index}`" v-for="(item, index) in option.imgList" :key="index" @tap="jumpLink(item.link)">
					<view class="swiper-img" :class="[imgClass, isMinHeight(currentItemId == index)]" :style="[imgStyle]">
						<image :mode="imgMode" :id="`imgBannerItem-${index}`" class="img-item" :style="[imgStyle]" :src="$fullLink(item.url)"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="indicators e-abso e-flex" :class="'indicators' + option.indicatorsType" :style="indicatorsStyle" v-if="option.indicatorsShow">
				<template v-if="option.indicatorsType < 4">
					<view class="indicators-item e-m-r-4" :class="{ 'indicators-active': index == currentItemId }" v-for="(item, index) in option.imgList" :key="index"></view>
				</template>
				<template v-else>{{ current }}/{{ option.imgList.length }}</template>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useLayoutCompoments } from './hooks';
import { useCurrentInstance } from '@/common/hooks';
import type { pageLink } from './type';
import { px2rpx } from './utils';

const emit = defineEmits(['pageBackgroundImageChange']);

type ImgItem = {
	url: string;
	bgImgUrl: string;
	link: pageLink;
};
const props = withDefaults(
	defineProps<{
		option: {
			styleType: 0 | 1 | 2;
			layoutType: 1 | 2 | 3;
			imgList: ImgItem[];
			indicatorsShow: boolean;
			indicatorsType: 0 | 1 | 2 | 3 | 4;
			indicatorsAlign: 'left' | 'center' | 'right';
			isToggleBackgroundImage: boolean;
			backgroundImageHeight: number;
			isCustomSize: boolean;
			customWidth: number;
			customHeight: number;
			backgroundColor: string;
			paddingTop: number;
			paddingBottom: number;
			paddingX: number;
			radiusTop: number;
			radiusBottom: number;
		};
	}>(),
	{
		option: () => ({
			styleType: 0,
			layoutType: 1,
			imgList: [],
			indicatorsShow: true,
			indicatorsType: 0,
			indicatorsAlign: 'center',
			isToggleBackgroundImage: false,
			backgroundImageHeight: 0,
			isCustomSize: false,
			customWidth: 0,
			customHeight: 0,
			backgroundColor: 'rgba(245, 246, 249, 1)',
			paddingTop: 12,
			paddingBottom: 12,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0
		})
	}
);

const ctx = useCurrentInstance();

const { bodyClass, jumpLink } = useLayoutCompoments(ctx, props.option);

const current = ref(1);
const currentItemId = ref('0');

const imgMode = computed(() => {
	return props.option.layoutType == 2 ? 'widthFix' : props.option.isToggleBackgroundImage ? 'scaleToFill' : 'aspectFit';
});
const imgHeight = computed(() => {
	if (props.option.isToggleBackgroundImage) {
		return props.option.isCustomSize ? `${props.option.customHeight}px` : '160px';
	}
	return props.option.isCustomSize ? px2rpx(props.option.customHeight) : '320rpx';
});

const imgSize = computed(() => {
	return {
		width: props.option.isCustomSize ? px2rpx(props.option.customWidth) : '100%',
		height: imgHeight.value
	};
});

const bodyStyle = computed(() => {
	return {
		padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)}  ${px2rpx(props.option.paddingBottom)} ${px2rpx(props.option.paddingX)}`,
		backgroundColor: props.option.backgroundColor,
		transition: '0.4s'
	};
});

const margin = computed(() => {
	return props.option.layoutType == 1 ? '0' : '60rpx';
});

const imgClass = computed(() => {
	return ['layout' + props.option.layoutType, bodyClass.value];
});

const borderRadius = computed(() => {
	return `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)}  ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}`;
});

const imgStyle = computed(() => {
	return {
		borderRadius: borderRadius.value
	};
});

const indicatorsStyle = computed(() => {
	switch (props.option.indicatorsAlign) {
		case 'left':
			return 'left: 40rpx';
		case 'center':
			return 'left: 50%;transform: translateX(-50%);';
		case 'right':
			return 'right: 40rpx';
	}
});

const setPageBackgroundImage = (index: number) => {
	if (props.option.isToggleBackgroundImage) {
		let bgImgUrl = props.option.imgList[index]?.bgImgUrl;
		emit('pageBackgroundImageChange', { url: bgImgUrl, height: Number(props.option.backgroundImageHeight) });
	}
};

const isMinHeight = (status: boolean) => {
	if (props.option.layoutType == 2) {
		return status ? '' : 'min-height';
	} else {
		return '';
	}
};

setPageBackgroundImage(0);
const handleChange = (e: { detail: { current: number; currentItemId: string } }) => {
	current.value = e.detail.current + 1;
	currentItemId.value = e.detail.currentItemId;
	setPageBackgroundImage(e.detail.current);
};
</script>

<style scoped lang="scss">
@import '@/components/list/css/layoutCommon.scss';

.swiper {
	white-space: nowrap;
}

.indicators {
	bottom: 20rpx;
	z-index: $z-index-normal;
}

.indicators0 {
	.indicators-item {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.2);
	}

	.indicators-active {
		background-color: rgba(0, 0, 0, 0.4);
	}
}

.indicators1 {
	.indicators-item {
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.2);
	}

	.indicators-active {
		width: 20rpx;
		border-radius: 6rpx;
		background-color: rgba(0, 0, 0, 0.4);
	}
}

.indicators2 {
	.indicators-item {
		width: 20rpx;
		height: 4rpx;
		border-radius: 6rpx;
		background: rgba(0, 0, 0, 0.2);
	}

	.indicators-active {
		background-color: rgba(0, 0, 0, 0.4);
	}
}

.indicators3 {
	.indicators-item {
		width: 64rpx;
		height: 6rpx;
		background: rgba(7, 7, 7, 0.2);
	}

	.indicators-active {
		background: rgba(0, 0, 0, 0.4);
	}
}

.indicators4 {
	padding: 0 20rpx;
	height: 34rpx;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 28rpx;
	font-size: 20rpx;
	color: $base-color-white;
	justify-content: center;
}

.swiper-img {
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: 0.5s;

	.img-item {
		width: 100% !important;
		height: 100% !important;
	}
}

.layout1 {
	width: 100%;
}

.layout2,
.layout3 {
	width: calc(100% - 20rpx) !important;
	height: 100% !important;

	.img-item {
		// height: 100% ;
		transition: 0.4s;
	}
}

.min-height {
	.img-item {
		height: 80% !important;
	}
}
</style>
